<template>
  <div>
    <!-- 下拉选择框 -->
    <el-select v-model="selectedOption" style="width: 200px" @change="handleChange">
      <el-option label="项目经理就业率" value="employmentRate" />
      <el-option label="项目经理班级信息" value="clazzInfo" />
    </el-select>

    <!-- 项目经理就业率数据表格 -->
    <el-table :row-class-name="tableRowClassName" v-if="selectedOption === 'employmentRate'" :data="employmentData" border
      style="width: 100%;margin-top: 10px;font-size: 20px;font-weight: 900;">
      <el-table-column prop="clazzManager" label="项目经理" />
      <el-table-column prop="avgEmploymentRate" label="总就业率">
        <template #default="scope">
          <span style="font-weight: bold;">{{
            (scope.row.avgEmploymentRate * 100).toFixed(0) }}%</span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 项目经理班级信息数据表格 -->
    <div v-if="selectedOption === 'clazzInfo'">
      <el-input v-model="searchName" style="width: 200px;margin-right: 10px;margin-top: 10px;" placeholder="请输入项目经理名称"
        clearable />
      <el-button type="primary" @click="clazzInfo" style="margin-top: 10px;">查询</el-button>

      <el-table :row-class-name="tableRowClassName" :data="clazzData" border style="width: 100%;margin-top: 10px;">
        <el-table-column prop="clazzManager" label="项目经理" />
        <el-table-column prop="clazzName" label="班级名称" />
        <el-table-column prop="realStudent" label="班级总数" />
        <el-table-column prop="employmentRate" label="就业率">
          <template #default="scope">
            <span style="font-weight: bold;">{{
              (scope.row.employmentRate * 100).toFixed(0) }}%</span>
          </template>
        </el-table-column>
        <el-table-column label="未就业人数">
          <template #default="scope">
            <span style="font-weight: bold;">{{
              scope.row.unemployedCount }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary" @click="getEmployment(scope.row.clazzName)">跳转详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <!-- layout:里面的值的顺序就是页面显示顺序 -->
      <div class="demo-pagination-block">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 20, 50]"
          :size="size" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </div>

  </div>
</template>
  
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElButton, ElTable, ElTableColumn, ElMessage } from 'element-plus';
import { managerRateApi, managerClazzInfoApi } from '@/api/emp-api';
import router from '@/router';

//分页参数
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(10)
const size = ref('default')

// 表格数据
const employmentData = ref([]);

const clazzData = ref([]);
// 搜索条件
const searchName = ref('');
//切换
const selectedOption = ref('employmentRate');


// 项目经理就业率
const list = async () => {
  const response = await managerRateApi();
  console.log('项目经理就业率', response);
  if (response.code === 200) {
    const filteredData = response.data.filter((item: any) => item.clazzManager !== null && item.clazzManager !== '');
    employmentData.value = filteredData;
  } else {
    ElMessage.error('查询失败');
  }
};

const getEmployment = (clazzName: any) => {
  const Employment = {
    clazzStatus: '',
    clazzName: clazzName,
  }

  localStorage.setItem("employmentJson", JSON.stringify(Employment));
  router.push('/clazz/clazzStudent')
}

// 项目经理班级信息
const clazzInfo = async () => {
  const response = await managerClazzInfoApi({ name: searchName.value, page: currentPage.value, size: pageSize.value });

  console.log('项目经理就业率', response);
  if (response.code === 200) {
    clazzData.value = response.data.list;
    total.value = response.data.total;
  } else {
    ElMessage.error('查询失败');
  }
}

// 切换选项
const handleChange = (value: string) => {
  selectedOption.value = value;
  if (value === 'employmentRate') {
    // 请求项目经理就业率数据
    list();
  } else if (value === 'clazzInfo') {
    // 请求项目经理班级信息数据
    clazzInfo();
  }
};

// 处理每页显示条数变化的事件
const handleSizeChange = (newPageSize: number) => {
  pageSize.value = newPageSize;
  clazzInfo();
};
// 处理当前页码变化的事件
const handleCurrentChange = (newPage: number) => {
  currentPage.value = newPage;
  clazzInfo();
};

// 页面加载完后，加载默认数据
onMounted(() => {
  list();
});

// 表格样式
const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: any
  rowIndex: number
}) => {
  row
  if (rowIndex % 2 === 0) {
    return 'success-row'
  }
  return ''
}

</script>
  
<style>
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>
